import React from 'react';
import './App.css';
import Home from './components/Home'
import {Route,Link, Redirect,NavLink,Switch ,withRouter} from 'react-router-dom'

function App(props) {
  console.log(props);
  props.history.listen((link)=>{
    console.log(link.pathname)
  })
  // withRouter 让不切换的路由 具有路由属性location macth history

  // 高阶组件 参数是一个组件 返回的值也是一个组件


  //编程式导航
  // props.history.push("/xxxx")
  // 路由传参 
  /**
   * params传参（优势 刷新地址参数依然存在，缺点只能传递字符串，参数过多时比较丑陋）
   * 1.需要在路由规则中设置的接受参数：xx
   * 2.发送参数 直接在跳转路径后进行编写
   * 3.接受props.match.parmas.参数名
   * 
   * query方式 (优势优雅 缺点刷新地址参数丢失)
   * 1.不需要在路由规则中进行传递参数配置
   * 2.直接发送数据
   * 3.使用this.props.location.query.xxx
   * 
   */
  return (
    <div className="App">
      <Link to='/home'>点击</Link>
      你好
      <Route path='/home' component={Home} />
      <Redirect from ='/' to='/home' exact />
      <NavLink to='/home'>点击</NavLink>
    </div>
  );
}

export default withRouter(App);
